<template>

  <el-dialog :title="!!data ? '修改' : '添加'" :visible.sync="visible" :close-on-click-modal="false" append-to-body width="500px" @closed="$emit('dialog-close')">

    <el-form ref="main-form" :model="form" :rules="rules" label-width="180px" size="mini">

      <el-form-item label="银行" prop="bankId">
        <el-select v-model="form.bankId" placeholder="请选择" clearable filterable style="width: 100%;">
          <el-option v-for="item in bankList" :key="item.id" :label="item.bankName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="监控条件" prop="type">
        <el-select v-model="form.type" placeholder="请选择" clearable style="width: 100%;">
          <el-option v-for="item in alarmBankTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="监控时效" prop="triggerInterval">
        <el-input placeholder="" v-model.number="form.triggerInterval" @keyup.enter.native="submit" >
          <span slot="suffix">分钟</span>
        </el-input>
      </el-form-item>

      <template v-if="form.type != 3">
        <el-form-item label="笔数" prop="triggerCount">
          <el-input placeholder="" v-model.number="form.triggerCount" @keyup.enter.native="submit" >
            <span slot="suffix">笔</span>
          </el-input>
        </el-form-item>
      </template>


      <el-form-item label="预警发送间隔时间" prop="mailInterval">
        <el-input placeholder="" v-model.number="form.mailInterval" @keyup.enter.native="submit" >
          <span slot="suffix">分钟</span>
        </el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="submit" size="mini" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>

import ApiMain from '@/api/alarm.bank';
// import ApiMain from '@/api/bank.info';

export default {
  mixins: [
  ],
  props: [
    'alarmBankTypeOptions',
    'bankList',
  ],
  data () {
    return {

      visible: false,
      loading: false,

      formRaw: null,
      form: {
        bankId         : '',
        type           : '',
        triggerInterval: 30,
        triggerCount   : 5,
        mailInterval   : 30,
      },

      rules: {
        bankId: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
        ],
        triggerInterval: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur' },
        ],
        triggerCount: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur' },
        ],
        mailInterval: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur' },
        ],

      },

      id  : null,
      data: null,

      isProxyOptions: [
        {label: '是', value: 1},
        {label: '否', value: 0},
      ],

      bankTypeOptions: []
    }
  },
  mounted () {
    this.formRaw = Object.copy(this.form);
    this.fetchBankTypeOptions()
  },

  methods: {

    show (data = null) {
      this.reset();
      this.fetchData(data);
      this.visible = true;
    },

    reset () {
      this.form = Object.copy(this.formRaw);
    },

    async fetchBankTypeOptions () {
    },

    fetchData (data) {

      this.data = Object.copy(data);

      if (!this.data) return;

      this.data.triggerInterval = Math.floor(this.data.triggerInterval / 60);
      this.data.mailInterval = Math.floor(this.data.mailInterval / 60);

      this.renderData();
    },

    renderData () {

      if (!this.data) return;

      for (var k in this.form) {
        if (this.data.hasOwnProperty(k)) {
          this.form[k] = this.data[k];
        }
      }
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      this.loading = true;

      try {
        if (!!this.data) {
          await this.submitSet();
        }
        else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    async submitSet () {

      var req = Object.copy(this.form);
      req.id              = this.data.id;
      req.triggerInterval = req.triggerInterval * 60;
      req.mailInterval    = req.mailInterval * 60;

      await ApiMain.set(req);
      this.$message({message: '修改成功', type: 'success'});
      this.visible = false;
    },

    async submitAdd () {

      var req = Object.copy(this.form);
      req.triggerInterval = req.triggerInterval * 60;
      req.mailInterval    = req.mailInterval * 60;

      await ApiMain.add(req);
      this.$message({message: '添加成功', type: 'success'});
      this.visible = false;
    },
  }
}
</script>

<style>

</style>
